import React from 'react';
import {TouchableOpacity, StyleSheet, View, Text} from 'react-native'
import MinaIcon from '../components/MinaIcon.js'

export default class ViewUtil {
  /**
   * 获取设置页的Item
   * @param callBack 单击item的回调
   * @param text 显示的文本
   * @param color 图标着色
   * @param Icons react-native-vector-icons组件
   * @param icon 左侧图标
   * @param expandableIco 右侧图标
   * @return {XML}
   */
  static getSettingItem(callBack, text, color, Icons, icon, expandableIco) {
    return (
      <TouchableOpacity
        onPress={callBack}
        style={styles.setting_item_container}>
        <View style={{alignItems: 'center', flexDirection: 'row'}}>
          {Icons && icon ?
            <MinaIcon
              name={Icons + '|' + icon}
              size={16}
              style={{color: color, marginRight: 10}}
            /> :
            <View style={{opacity: 1, width: 16, height: 16, marginRight: 10,}}/>
          }
          <Text style={{color: '#282828', fontSize: 16}}>{text}</Text>
        </View>
        <MinaIcon
          name={expandableIco ? Icons + '|' + expandableIco : 'Ionicons|' +  'ios-arrow-forward' }
          size={16}
          style={{
            alignSelf: 'center',
            color: color || '#ccc',
          }}
        />
      </TouchableOpacity>
    )
  }

  /**
   * 获取设置页的Item
   * @param callBack 单击item的回调
   * @param menu @MORE_MENU
   * @param color 图标着色
   * @param expandableIco 右侧图标
   * @return {XML}
   */
  static getMenuItem(callBack, menu, color, expandableIco) {
    return ViewUtil.getSettingItem(callBack, menu.name, color, menu.Icons, menu.icon, expandableIco)
  }

  /**
   * 获取左侧返回按钮
   * @param callBack
   * @returns {XML}
   */
  static getLeftBackButton(callBack, color) {
    return <TouchableOpacity
      style={styles.leftBackButton}
      onPress={callBack}>
      <MinaIcon
        name={'Ionicons|ios-arrow-back'}
        size={20}
        style={{
          color: color || '#666'
        }}
      />
    </TouchableOpacity>
  }

  /**
   * 获取右侧文字按钮
   * @param title
   * @param callBack
   * @returns {XML}
   */
  static getRightButton(title, callBack) {
    return <TouchableOpacity
      style={{alignItems: 'center',}}
      onPress={callBack}>
      <Text style={{fontSize: 20, color: '#FFFFFF', marginRight: 10}}>{title}</Text>
    </TouchableOpacity>
  }

  /**
   * 获取分享按钮
   * @param callBack
   * @returns {XML}
   */
  // static getShareButton(callBack) {
  //   return <TouchableOpacity
  //     underlayColor={'transparent'}
  //     onPress={callBack}>
  //     <Ionicons
  //       name={'md-share'}
  //       size={20}
  //       style={{opacity: 0.9, marginRight: 10, color: 'white'}}
  //     />
  //   </TouchableOpacity>
  // }

}
const styles = StyleSheet.create({
  setting_item_container: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: 15, 
    height: 52,
    backgroundColor: '#fff',
  },
  leftBackButton: {
    paddingRight: 8,
    paddingTop: 8,
    paddingBottom: 8,
  }
});